<template>
  <div class="studentPage">
    <el-container>
      <el-header style="background-image: linear-gradient(to right, #8ac9e2, #80eff3)">
        <Header name="学生管理"></Header>
      </el-header>
      <el-main>
        <!-- 学生管理表格 -->
        <el-container>
          <el-header>
            <div class="header">
              <el-button type="success" icon="el-icon-edit" @click="handleStartInsert"
                         plain>添加学生
              </el-button>
              <el-button type="danger" icon="el-icon-delete" @click="deleteStudentsVisible = true"
                         plain>批量删除
              </el-button>
              <div class="search">
                <el-input v-model="searchContext" prefix-icon="el-icon-search"></el-input>
              </div>
            </div>
          </el-header>
          <el-main style="margin-top: -20px">
            <el-table :data="data" @selection-change="handleDeleteSelectionChange"
                      style="width: 100%" :row-class-name="tableRowClassName" size="small" border>
              <el-table-column type="selection" width="50" align="center"></el-table-column>
              <el-table-column label="序号" prop="id" width="100" align="center"></el-table-column>
              <el-table-column label="姓名" prop="name" width="200" align="center"></el-table-column>
              <el-table-column label="年龄" prop="age" width="180" align="center"></el-table-column>
              <el-table-column label="性别" prop="gender" width="180" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <div>
                    <el-button type="primary" icon="el-icon-search"
                               size="small"
                               plain>详情
                    </el-button>
                    <el-button type="warning" icon="el-icon-edit"
                               @click="handleStartUpdate(scope.row)"
                               size="small"
                               style="margin-left: 20px"
                               plain>修改
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete"
                               @click="handleStartDelete(scope.row)"
                               size="small"
                               style="margin-left: 20px"
                               plain>删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
        <el-footer>
          <!-- 分页 -->
          <div class="studentPagination">
            <el-pagination
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="studentList.length">
            </el-pagination>
          </div>
        </el-footer>
      </el-main>

    </el-container>

    <!-- 添加Dialog -->
    <el-dialog title="添加" :visible.sync="insertStudentVisible" width="45%" center>
      <el-form :model="insertStudentForm">
        <el-form-item label="姓名" label-width="120px">
          <el-input v-model="insertStudentForm.name" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="年龄" label-width="120px">
          <el-input v-model="insertStudentForm.age" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="120px">
          <el-input v-model="insertStudentForm.gender" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insertStudentVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEndInsert">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改Dialog -->
    <el-dialog title="修改" :visible.sync="updateStudentVisible" width="45%" center>
      <el-form :model="updateStudentForm">
        <el-form-item label="姓名" label-width="120px">
          <el-input v-model="updateStudentForm.name" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="年龄" label-width="120px">
          <el-input v-model="updateStudentForm.age" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="120px">
          <el-input v-model="updateStudentForm.gender" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateStudentVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEndUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除Dialog -->
    <el-dialog title="删除" :visible.sync="deleteStudentVisible" width="35%" center>
      <span class="deleteLabel">删除不可恢复, 确认删除?</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteStudentVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEndDelete">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量删除Dialog -->
    <el-dialog title="批量删除" :visible.sync="deleteStudentsVisible" width="35%" center>
      <span>删除不可回复, 确认删除?</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteStudentsVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEndDeleteMany">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header from '../components/Header'

export default {
  name: "StudentPage",
  components: {Header},
  data() {
    return {
      studentList: [], // 存储student数据
      tempList: [], // 查询时将student数据暂时存放在这里
      searchContext: '', // 搜索框内容
      currentPage: 1, // 当前页码
      pageSize: 6, // 每页显示的记录数量

      insertStudentVisible: false, // 开启插入Dialog的信号量
      updateStudentVisible: false, // 开启更新Dialog的信号量
      deleteStudentVisible: false, // 开启删除Dialog的信号量
      deleteStudentsVisible: false, // 开启批量删除Dialog的信号量

      insertStudentForm: {
        name: '',
        age: '',
        gender: '',
        clazzId: 0
      },
      updateStudentForm: {
        id: 0,
        name: '',
        age: '',
        gender: '',
        clazzId: 0
      },
      isDelete: 0,
      deleteSelection: []
    }
  },
  created() {
    if (this.$route.query.id) {
      this.getStudentData()
    } else {
      this.getAllStudentData()
    }
  },
  computed: {
    data() {
      return this.studentList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  watch: {
    searchContext: function () {
      if (!this.searchContext) {
        this.studentList = this.tempList
      } else {
        this.studentList = []
        for (const element of this.tempList) {
          if (element.name.includes(this.searchContext)) {
            this.studentList.push(element)
          }
        }
      }
    }
  },
  methods: {
    tableRowClassName({rowIndex}) {
      if (rowIndex % 2 === 0) {
        return 'warning-row';
      } else if (rowIndex % 2 === 1) {
        return 'success-row';
      }
    },
    async getStudentData() {
      const {data} = await this.$axios.get(`/student/list/${this.$route.query.id}`)
      if (data.code) {
        this.studentList = data.data
        this.tempList = data.data
      }
    },
    async getAllStudentData() {
      const {data} = await this.$axios.get(`/student/`)
      if (data.code) {
        this.studentList = data.data
        this.tempList = data.data
      }
    },

    handleStartInsert() {
      this.insertStudentForm.clazzId = this.$route.query.id
      this.insertStudentVisible = true
    },
    handleStartUpdate(row) {
      this.updateStudentForm.id = row.id
      this.updateStudentForm.name = row.name
      this.updateStudentForm.age = row.age
      this.updateStudentForm.gender = row.gender
      this.updateStudentForm.clazzId = this.$route.query.id
      this.updateStudentVisible = true
    },
    handleStartDelete(row) {
      this.isDelete = row.id
      this.deleteStudentVisible = true
    },
    handleDeleteSelectionChange(val) {
      this.deleteSelection = val;
    },
    handleCurrentChange(page) {
      this.currentPage = page
    },

    async handleEndInsert() {
      let params = new URLSearchParams();
      params.append("name", this.insertStudentForm.name)
      params.append("age", this.insertStudentForm.age)
      params.append("gender", this.insertStudentForm.gender)
      params.append("clazzId", this.insertStudentForm.clazzId)
      const {data} = await this.$axios.post(`/student/put`, params)
      if (data.code) {
        await this.getStudentData()
        this.$notify({
          title: '成功',
          message: data.message,
          type: 'success'
        })
      } else {
        this.$notify({
          title: '失败',
          message: data.message,
          type: 'warning'
        })
      }
      this.insertStudentVisible = false
      this.insertStudentForm = {}
    },
    async handleEndUpdate() {
      let params = new URLSearchParams();
      params.append("id", this.updateStudentForm.id)
      params.append("name", this.updateStudentForm.name)
      params.append("age", this.updateStudentForm.age)
      params.append("gender", this.updateStudentForm.gender)
      params.append("clazzId", this.updateStudentForm.clazzId)
      const {data} = await this.$axios.put(`/student/put`, params)
      if (data.code) {
        await this.getStudentData()
        this.$notify({
          title: '成功',
          message: data.message,
          type: 'success'
        })
      } else {
        this.$notify({
          title: '失败',
          message: data.message,
          type: 'warning'
        })
      }
      this.updateStudentVisible = false
    },
    async handleEndDelete() {
      const {data} = await this.$axios.delete(`/student/${this.isDelete}`)
      if (data.code) {
        await this.getStudentData()
        this.$notify({
          title: '成功',
          message: data.message,
          type: 'success'
        })
      } else {
        this.$notify({
          title: '失败',
          message: data.message,
          type: 'warning'
        })
      }
      this.deleteStudentVisible = false
    },
    async handleEndDeleteMany() {
      for (const deleted of this.deleteSelection) {
        const {data} = await this.$axios.delete(`/student/${deleted.id}`)
        if (data.code) {
          this.$notify({
            title: '成功',
            message: data.message,
            type: 'success'
          })
        } else {
          this.$notify({
            title: '失败',
            message: data.message,
            type: 'warning'
          })
        }
      }
      await this.getStudentData()
      this.deleteStudentsVisible = false
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.el-table .warning-row {
  background: #f8f6f6;
}

.el-table .success-row {
  background: #f1f1f1;
}

.header {
  margin-top: 5px;
}

.search {
  width: 335px;
  float: right;
}

.studentPagination {
  position: absolute;
  top: 88%;
  right: 2%;
}
</style>
